<template>
    <div id="seachDialog">
      <a-modal
        title="添加合同"
        v-model="hetongData.show"
        width="1150px"
        style="overflow:hidden"
        @cancel="handleClose">
        <el-row>
          <el-col :span="24" style="padding:20px 0 0 50px">
            <el-input style="width:140px;" v-model="parames.customerName" size="small" clearable placeholder="公司名称"></el-input>
            <el-input style="width:140px;" v-model="parames.serialNumber" size="small" clearable placeholder="合同流水号"></el-input>
            <el-date-picker
            style="width:180px"
            size="small"
            clearable
            value-format="yyyy-MM-dd"
            v-model="parames.startDate"
            type="date"
            placeholder="缴费开始时间">
            </el-date-picker>
            <el-date-picker
            style="width:180px"
            size="small"
            clearable
            value-format="yyyy-MM-dd"
            v-model="parames.endDate"
            type="date"
            placeholder="缴费结束时间">
            </el-date-picker>
            <span>是否撤户:</span>
            <el-select style="width:80px" size="small" v-model="parames.revoke" placeholder="请选择">
              <el-option label="是" :value="true"></el-option>
              <el-option label="否" :value="false"></el-option>
            </el-select>
            <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
          </el-col>
          <el-col :span="24" id="hetong-child">
            <el-table
            :data="dataList"
            height="500"
            ref="productTables"
            v-loading="loading"
            style="margin-top:14px;"
            >
            <el-table-column type="expand"  >
              <template slot-scope="props" style="background:#fafafa;">
                <el-table
                  class="child-table2"
                  :data="props.row.contractProductVOList"
                  style="background:#fafafa"
                  :header-cell-style="headerCalss"
                  >
                  <el-table-column prop="contractProductId" label="选择" width="50">
                        <template slot-scope="scope">
                          <el-radio v-model="radio" :disabled="scope.row.refundAmount !== 0 || scope.row.allowRefundAmount == 0" :label="scope.row.contractProductId" @change="handleSelect(scope.row,props.row)">&nbsp;</el-radio>
                        </template>
                    </el-table-column>
                  <el-table-column prop="productName" label="产品名称"></el-table-column>
                  <el-table-column prop="paymentStatus" label="付款状态">
                    <template slot-scope="scope">
                        <span v-if="scope.row.paymentStatus">{{scope.row.paymentStatus.desc}}</span>
                    </template>
                  </el-table-column>
                  <!-- <el-table-column prop="customerName" label="服务金额"></el-table-column> -->
                  <el-table-column prop="liquidatedDamagesAmount" label="违约金"></el-table-column>
                  <el-table-column prop="receiptedAmount" label="实收"></el-table-column>
                  <el-table-column prop="consumptionAmount" label="消耗"></el-table-column>
                  <el-table-column prop="expenditureAmount" label="支出"></el-table-column>
                  <el-table-column width="120" prop="allowRefundAmount" label="可退款金额"></el-table-column>
                  <el-table-column prop="refundAmount" label="退款金额"></el-table-column>
                  <el-table-column prop="remainingAmount" label="剩余待收"></el-table-column>
                  <el-table-column width="120" prop="receiptStartDate" label="缴费开始时间">
                      <template slot-scope="scope">
                          <span>{{scope.row.receiptStartDate | formatDate}}</span>
                      </template>
                  </el-table-column>
                  <el-table-column width="120" prop="receiptEndDate" label="缴费结束时间">
                      <template slot-scope="scope">
                          <span>{{scope.row.receiptEndDate | formatDate}}</span>
                      </template>
                  </el-table-column>
                </el-table>
              </template>
            </el-table-column>
            <el-table-column show-overflow-tooltip prop="customerName" label="公司名称"></el-table-column>
            <el-table-column prop="id" label="合同流水号">
                <template slot-scope="scope">
                  <span style="color:#409EFF;cursor:pointer" @click="handleRow(scope.row)">{{scope.row.id}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="productUnit" label="销售代表">
                <template slot-scope="scope">
                    <span>{{scope.row.seller}}({{scope.row.sellerWorkNumber}})</span>
                </template>
            </el-table-column>
            <el-table-column prop="startDate" label="合同开始时间">
                <template slot-scope="scope">
                    <span>{{scope.row.startDate | formatDate}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="endDate" label="合同结束时间">
                <template slot-scope="scope">
                    <span>{{scope.row.endDate | formatDate}}</span>
                </template>
            </el-table-column>
            <!-- <el-table-column prop="productUnit" label="剩余待收">
                <template slot-scope="scope">
                    <span>{{scope.row.remainingAmount}}</span>
                </template>
            </el-table-column> -->
            </el-table>
          </el-col>
        </el-row>
        <span slot="footer" class="dialog-footer">
            <el-button size="small" type="primary" @click="handleSend">添加</el-button>
            <el-button size="small" @click="handleClose">取消</el-button>
        </span>
        <contractDetailDialog :detailData="detailData"></contractDetailDialog>
       

      </a-modal>
    </div>
</template>

<script>
import contractDetailDialog from "../contractManage/contractDetailDialog.vue"; //合同详情弹窗

export default {
    props: ['hetongData'],
    data() {
        return {
            radio: '',
          parames: {
            customerName: '',
            serialNumber: '',
            startDate: '',
            endDate: '',
            revoke: false
          },
          detailData: { //合同详情弹窗
            id: '',
            show: false
          },
          loading: false,
          dataList: [],
          multipleSelection: []
        }
    },
    components: {
      contractDetailDialog
    },
    methods: {
      handleClose () {
        this.hetongData.show = false
      },
      headerCalss () {
        return "background: #f7f7f7;"
      },
      search () {
        this.render()
      },
      handleSelect(row,props) { //选择
        row.customerName = props.customerName
        this.multipleSelection = row
      },
      handleSend () {
        let data = this.multipleSelection
        this.$emit('watchSlect',this.multipleSelection)
        this.handleClose()
      },
      handleRow(row) { //点击某一行数据打开合同详情
        this.detailData.id = row.id;
        this.detailData.show = true;
      },
      render () {
        this.loading = true
        this.$post(this.$api.postContractListForRefund,this.parames).then(response => {
            if (response.data.succeed) {
                this.dataList = response.data.data
                setTimeout(() => {
                    this.loading = false
                }, 200);
            }
        })
      }
    },
    computed: { //计算属性
      changeDialog () {
        return this.hetongData.show
      }
    },
    watch: {
      changeDialog: {
        handler (curVal, oldVal) {
          if (curVal) {
            this.render()
          } else {
            // this.restData()
            this.radio = ''
            this.parames.customerName = ''
            this.parames.serialNumber = ''
            this.parames.startDate = ''
            this.parames.endDate = ''
            this.parames.revoke = false
          }
        }
      },
      deep: true
    }
};
</script>

<style>
  #hetong-child .el-table__expanded-cell{
    background: #f7f7f7;
    padding: 0 0 0 50px
  }
  .child-table2 .el-table th, .el-table tr{
    background: #f7f7f7;
  }
</style>